<template>
  <section class="p-4 w-full">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-2xl font-bold font-mono text-gray-800">{{ session.todoNum }} / {{ session.total }}</span>
        <span class="ml-5 flex items-center space-x-2">
          <span class="text-xs text-gray-500">总耗时:</span>
          <span class="text-red-500">{{ timeFormat(session.duration) }}</span>
        </span>
      </div>
      <div data-wails-no-drag class="flex space-x-4">
        <el-button type="primary" :disabled="saving" @click="openFileDialog">选择文件</el-button>
        <el-button :disabled="saving" @click="handleReset">重置</el-button>
      </div>
    </div>

    <div class="rounded-xl shadow-lg overflow-hidden mt-4">
      <el-table :data="tableData" stripe size="small" class="w-full mt-5" height="350">
        <el-table-column prop="filePath" label="文件路径" minWidth="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mimeType" label="文件类型" align="center"></el-table-column>
        <el-table-column prop="size" label="文件大小" minWidth="100" align="center">
          <template #default="scope">
            {{ getByte(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="savedSize" label="输出大小" minWidth="100" align="center">
          <template #default="scope">
            {{ getByte(scope.row.savedSize) }}
          </template>
        </el-table-column>
        <el-table-column prop="savedRatio" label="压缩率" align="center">
          <template #default="scope">
            <span class="font-mono text-red-500" v-if="scope.row.savedSize">
              {{ (((scope.row.size - scope.row.savedSize) * 100) / scope.row.size).toFixed(2) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="outMimeType" label="输出类型" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <div class="flex justify-center">
              <base-icon :name="scope.row.status" :iconClass="getStausClass(scope.row.status)"></base-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="耗时" width="80" align="center">
          <template #default="scope">
            {{ timeFormat(scope.row.duration) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bg-white p-4 pb-0 mt-4 rounded-xl shadow-lg">
      <el-form :inline="true" :model="formConfig" class="flex flex-wrap" data-wails-no-drag>
        <el-form-item label="文件格式" class="w-1/3 flex-none">
          <el-select v-model="formConfig.target" placeholder="请选择输出格式" class="flex-1">
            <el-option label="默认" value="default"></el-option>
            <el-option label="JPG" value="jpg"></el-option>
            <el-option label="PNG" value="png"></el-option>
            <el-option label="WebP" value="webp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称前缀" class="w-1/3 flex-none">
          <el-input v-model="formConfig.prefix" placeholder="名称前缀" />
        </el-form-item>
        <el-form-item label="名称后缀" class="w-1/3 flex-none">
          <el-input v-model="formConfig.suffix" placeholder="名称后缀" />
        </el-form-item>
        <el-form-item label="保存位置" class="w-2/3 flex-none">
          <div class="flex items-center flex-grow">
            <el-radio-group v-model="formConfig.outDirType" class="w-72">
              <el-radio label="0">原文件夹</el-radio>
              <el-radio label="1">自定义</el-radio>
            </el-radio-group>
            <el-input
              v-model="formConfig.outDir"
              readonly
              :disabled="formConfig.outDirType == 0"
              class="flex-grow"
              placeholder="路径"
            >
              <template #append>
                <el-button @click="selectDir" :disabled="formConfig.outDirType == 0">选择</el-button>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item class="w-1/3 flex-none">
          <div class="flex-1 flex justify-end">
            <el-button
              type="primary"
              :disabled="tableData.length == 0 || session.duration > 0"
              :loading="saving"
              @click="CompressImages"
            >
              开始压缩
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { timeFormat, getByte } from "@/lib/index.js";
onMounted(async () => {
  // 设置默认的文件夹
  formConfig.outDir = await window.go.app.App.GetDefaultDir();
  // 绑定监听事件
  window.runtime.EventsOn("event:compressFileList", val => {
    tableData.length = 0;
    tableData.push(...val);
  });
  window.runtime.EventsOn("event:compressSession", val => {
    Object.assign(session, val);
  });
  window.runtime.EventsOn("event:fileStateUpdate", val => {
    tableData.forEach(v => {
      if (v.id == val.id) Object.assign(v, val);
    });
  });
});

const getStausClass = status => {
  switch (status) {
    case "wait":
    case "error":
      return "text-gray-400";
    case "process":
      return "text-blue-400";
    case "success":
      return "text-red-400";
  }
};

// 统计信息
const session = reactive({
  total: 0,
  todoNum: 0,
  duration: 0
});

const saving = ref(false);
// 图片列表
const tableData = reactive([]);
const formConfig = reactive({
  target: "default",
  prefix: "",
  suffix: "",
  outDirType: "0",
  outDir: ""
});

// 选择文件夹
const selectDir = async () => {
  let res = await window.go.app.App.SelectDir();
  if (res) formConfig.outDir = res;
};

// 选择文件
const openFileDialog = async () => {
  if (session.duration > 0) await window.go.app.App.CompressFileListClear();
  window.go.app.App.SelectMultipleFiles();
};
// 重置文件
const handleReset = () => {
  window.go.app.App.CompressFileListClear();
};
// 开始压缩处理
const CompressImages = async () => {
  saving.value = true;
  await window.go.app.App.CompressImages(formConfig);
  saving.value = false;
};
</script>

<style scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 0px;
  padding-right: 20px;
}

:deep(.el-radio) {
  margin-right: 16px;
}
</style>
